<template>
  <div>
    <div style="display: flex;justify-items: center;align-items: center; display: flex;
  align-items: center;
  justify-content: left;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100vh;
  flex-direction: column;
">
      <!--              条件搜索区域-->
      <div style="display: flex;align-items: center;justify-content: center;width: 100%; height: 8vh">
        <div style="width: 30%; display: flex;align-items: center;justify-content: center">
          <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">日志名称:</span>
          <!--            <el-select v-model="projectSelectValue" placeholder="请选择所属项目">-->
          <el-input v-model="noteNameSelectValue" placeholder="请输入日志名称" size="small" style="width: auto"></el-input>
        </div>

        <div style="width: 30%; display: flex;align-items: center;justify-content: center">
          <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">日志类型:</span>
          <el-select v-model="noteTypeSelectValue" placeholder="请选择日志类型">
            <el-option
                v-for="item in noteTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div style="width: 30%; display: flex;align-items: center;justify-content: center">
          <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">发布日期:</span>
          <el-date-picker
              v-model="publishTimeSelectValue"
              type="date"
              placeholder="选择日期">
          </el-date-picker>

        </div>

        <div style="width: 30%; display: flex;align-items: center;justify-content: center">
          <el-button type="primary" style="width: 37%;margin: 12px" @click="getMyNotesConditional">搜索
          </el-button>
          <el-button style="width: 37%;margin: 12px" @click="reSetMyNoteSelectCondition">重置
          </el-button>
        </div>
      </div>
      <!--      表格展示区域-->

      <!--      表格头-->
      <div
          style="display: flex;align-items: center;justify-content: center;height: 5%;margin: 6px;width: 100%">

        <div style="display: flex;align-items: center;justify-content: left;width: 50%">
                    <Span
                        style="font-size: 24px;font-family: 'PingFang SC';font-weight: bolder;margin-left: 12px">日志管理</Span>
        </div>

        <div style="display: flex;align-items: center;justify-content: center;width: 50%">
          <!--              任务状态选择-->
          <el-radio-group v-model="tabPosition">
            <el-radio-button label="all" @click.native="changeTab('all')">全部</el-radio-button>
            <el-radio-button label="save" @click.native="changeTab('save')">保存未发布</el-radio-button>
            <el-radio-button label="timed" @click.native="changeTab('timed')">定时发布</el-radio-button>
            <el-radio-button label="published" @click.native="changeTab('published')">已发布</el-radio-button>
          </el-radio-group>
          <!--              任务模糊查询-->
          <el-input
              placeholder="请输入日志id进行搜索"
              v-model="searchValue" style="width: 49%;margin-left: 10px;margin-right: 12px">
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="selectNoteById">搜索</el-button>

        </div>
      </div>

      <!--      表格本体-->
      <div style="display: flex;justify-items: center;margin: 12px;height: 78vh;width: 100%">
        <el-table
            :data="tableData"
            style="width: 100%;margin: 12px"
            stripe="true"
        >
          <el-table-column
              prop="noteId"
              label="日志Id"
          >
          </el-table-column>
          <el-table-column
              prop="noteName"
              label="日志名称"
          >
          </el-table-column>
          <el-table-column
              prop="noteType"
              label="类型">

            <template slot-scope="scope">
              <el-tag
                  disable-transitions
                  effect="Plain"
              >{{ switchNoteType(scope.row.noteType).noteTypeName }}
              </el-tag>
            </template>

          </el-table-column>

          <el-table-column
              prop="publishTime"
              label="发布时间">
            <template slot-scope="scope">
              {{ timeFormatConversion(scope.row) }}
            </template>
          </el-table-column>

          <el-table-column
              prop="noteStatus"
              label="状态">
            <template slot-scope="scope">
              <el-tag
                  :type="switchNoteStatus(scope.row.noteStatus).tagStyle"
                  disable-transitions
                  effect="dark"
              >{{ switchNoteStatus(scope.row.noteStatus).noteStatusName }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">

              <el-button
                  size="mini"
                  @click="toMyNoteEdit(scope.row)"
                  plain
                  :disabled="checkStatus(scope.row.noteStatus)"
              >编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="delNote(scope.row.noteId)"
                  plain
              >删除
              </el-button>

              <el-button
                  size="mini"
                  type="info"
                  @click="viewNoteInfo(scope.row)"
                  plain
              >查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--查看日志详情的弹窗-->
        <el-dialog
            title="日志详情"
            :visible.sync="noteDialogVisible"
            width="80%"
        >
          <div style="display: flex;width: auto;align-items: center;justify-content: center;flex-direction: column">
            <!--            预览md区域-->
              <v-md-editor v-model="noteInfoText" height="100%"
                           mode="preview"
              ></v-md-editor>
          </div>


          <span slot="footer" class="dialog-footer">
    <el-button @click="noteDialogVisible = false">关闭</el-button>
    <el-button type="primary" @click="noteDialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>


      </div>
      <!--     分页组件 -->
      <div style="display: flex;align-items: center;justify-content: center;margin: 6px">
        <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :pageSize="pageSize"
            :total="total"
            @current-change="change"
        >
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "NoteManagement",
  data() {
    return {
      noteInfoText: '',//日志详情弹窗展示md文档数据绑定
      noteInfo: {},//日志详情弹窗展示数据绑定
      noteDialogVisible: false, //日志详情查看
      //分页相关
      pageSize: 10, //设置默认值为12条一页
      total: 0,
      pageNum: 0,
      loginUserRole: JSON.parse(localStorage.getItem("loginUserRole")),
      tabPosition: 'all',//任务状态的表格显示
      loginUser: JSON.parse(localStorage.getItem("loginUser")), //当前登录用户
      tableData: [],//日志表的绑定数据
      noteTypeSelectValue: '',  //日志类型选中
      noteTypeOptions: [ //日志类型选项
        {
          value: 0,
          label: '日报'
        },
        {
          value: 1,
          label: '周报'
        }, {
          value: 2,
          label: '月度总结'
        }
      ],

      publishTimeSelectValue: '',//发布时间选中绑定
      noteNameSelectValue: '',//日志名字查询绑定

      noteStatusSelectValue: 3, //日志状态的条件查询绑定

      searchValue: '', //通过日志id查询的数据绑定
    }
  },
  mounted() {
    this.$request.get("/note/getNoteConditionalQueryByPage", {
      params: {
        publishUserid: this.loginUser.uid,
        currentPage: this.pageNum,
        pageSize: this.pageSize,
        noteStatusSelectValue: this.noteStatusSelectValue,
        noteTypeSelectValue: this.noteTypeSelectValue,
        publishTime: this.publishTimeSelectValue,
        noteNameSelectValue: this.noteNameSelectValue,
        queryType: 1 //表示只进行条件查询，不分页
      }
    }).then(res => {
      if (res.successFlag) {
        this.tableData = res.data.pageData
        this.total = res.data.totalData
      } else {
        this.$message.error(res.errorMsg)
      }
    })

  },
  methods: {
    timeFormatConversionForViewNoteInfo(date){
      let showDate = ''
      const [year, month, day, hours, minutes] = date;
      // Format time as "YYYY年M月D日-HH：mm"
      const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
      // Save the formatted time string to the data property
      showDate = formattedTime
      return showDate
    },

    //日期转换
    timeFormatConversion(note) {
      let showDate = ''
      /*if (publishTime != null) {
        showDate = publishTime[0] + '年' + publishTime[1] + '月' + publishTime[2] + '日' + '-' + publishTime[3] + ':' + publishTime[4]
      } else {
        showDate = '暂无日期'
      }*/
      const [year, month, day, hours, minutes] = note.publishTime;
      // Format time as "YYYY年M月D日-HH：mm"
      const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
      // Save the formatted time string to the data property
      showDate = formattedTime
      return showDate
    },

    //条件查询
    async getMyNotesConditional() {
      await this.$request.get("/note/getNoteConditionalQueryByPage", {
        params: {
          publishUserid: this.loginUser.uid,
          currentPage: this.pageNum,
          pageSize: this.pageSize,
          noteStatusSelectValue: this.noteStatusSelectValue,
          noteTypeSelectValue: this.noteTypeSelectValue,
          publishTime: this.publishTimeSelectValue,
          noteNameSelectValue: this.noteNameSelectValue,
          queryType: 1 //表示只进行条件查询，不分页
        }
      }).then(res => {
        if (res.successFlag) {
          this.tableData = res.data.pageData
          this.total = res.data.totalData
        } else {
          this.$message.error(res.errorMsg)
        }
      })
    },

    switchNoteType(noteType) {
      let reslut = {
        noteTypeName: ''
      }
      if (noteType === 0) {
        reslut.noteTypeName = '日报'
        return reslut
      } else if (noteType === 1) {
        reslut.noteTypeName = '周报'
        return reslut
      } else if (noteType === 2) {
        reslut.noteTypeName = '月度总结'
        return reslut
      }
      return reslut
    },

    switchNoteStatus(noteStatus) {
      let reslut = {
        tagStyle: '',
        noteStatusName: ''
      }
      if (noteStatus === 0) {
        reslut.tagStyle = 'warning'
        reslut.noteStatusName = '保存未发布'
        return reslut
      } else if (noteStatus === 1) {
        reslut.tagStyle = 'success'
        reslut.noteStatusName = '已发布'
        return reslut
      } else if (noteStatus === 2) {
        reslut.tagStyle = ''
        reslut.noteStatusName = '定时发布'
        return reslut
      }
      return reslut
    },

    switchMsgStatus(msgStatus) {
      let reslut = {
        tagStyle: '',
        msgStatusName: ''
      }
      if (msgStatus === 0) {
        reslut.tagStyle = 'warning'
        reslut.msgStatusName = '未读'
        return reslut
      } else if (msgStatus === 1) {
        reslut.tagStyle = 'success'
        reslut.msgStatusName = '已读'
        return reslut
      }
      return reslut
    },

    async changeTab(queryCriteria) {
      //选择了任务状态作为条件，把分页参数重置
      this.pageNum = 1
      this.tabPosition = queryCriteria
      if (queryCriteria === "save") {
        this.noteStatusSelectValue = 0
      } else if (queryCriteria === "timed") {
        this.noteStatusSelectValue = 2
      } else if (queryCriteria === "published") {
        this.noteStatusSelectValue = 1
      } else if (queryCriteria === "all") {
        this.noteStatusSelectValue = 3
      }
      await this.getMyNotesConditional()
    },

    //判读日志状态看是否能够编辑
    checkStatus(noteStatus) {
      if (noteStatus === 1) {
        return true
      }
      return false
    },

    //删除日志
    async delNote(noteId) {
      this.$request.delete("/note/delNoteByNoteId" + "?noteId=" + noteId + "&userRole=" + this.loginUserRole).then(res => {
        if (res.successFlag) {
          this.$message.success("删除成功!")
          this.getMyNotesConditional()
        } else {
          this.$message.error(res.errorMsg)
        }
      })
    },

    //重置查询条件
    reSetMyNoteSelectCondition() {
      this.noteTypeSelectValue = ''
      this.publishTimeSelectValue = ''
      this.noteNameSelectValue = ''
      this.getMyNotesConditional()
    },

    //通过日志id进行搜索
    selectNoteById() {
      this.$request.get("/note/getNoteById", {
        params: {
          noteId: this.searchValue
        }
      }).then(res => {
        if (res.successFlag) {
          this.tableData = res.data.pageData
          this.total = res.data.totalData
        } else {
          this.$message.error(res.errorMsg)
        }
      })
    },

    //跳转到我的日志进行日志编辑
    toMyNoteEdit(note) {
      localStorage.setItem("editNote", JSON.stringify(note))
      this.$router.push('/myNotes')
    },

    //分页控件换页功能
    change(pageNum) {
      this.pageNum = pageNum;
      this.getMyNotesConditional();
    },

    //日志弹窗显示
    viewNoteInfo(note) {
      //1.弹窗显示
      this.noteDialogVisible = true
      //2.弹窗展示数据绑定
      this.noteInfo = note
      //3.md文档信息绑定
      this.noteInfoText = note.noteContent
    }

  }
}
</script>

<style scoped>

</style>